import styled from 'styled-components';

const BorderColor = '#eaeaea';
const HandleResetColor = '#e0e0e0';
const ThTdPadding = 12;

export const WTableProStyle = styled.div`
	width: 100%;
	height: 100%;
	/* border: 1px solid ${BorderColor};
	border-radius: 6px;
	overflow: hidden; */
	background: #fff;
	display: flex;
	flex-direction: column;
	table {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		word-break: break-all;
		word-wrap: break-word;
	}
	/* ============================== head ====================================== */
	.w-table-head {
		thead tr .w-table-title {
			background: #fafafa;
			text-align: left;
			border-right: 1px solid ${BorderColor};
			border-bottom: 1px solid ${BorderColor};
			padding: ${ThTdPadding}px;

			&.w-table-resizable {
				position: relative;
			}
		}
		.w-table-resizable-handle {
			position: absolute;
			top: 50%;
			bottom: 0;
			right: 0;
			width: 4px;
			height: 60%;
			border-left: 1px solid ${HandleResetColor};
			transform: translateY(-50%);
			cursor: col-resize;
		}
		thead tr th:last-child {
			border-right: none;
		}
	}
	/* ============================== body ====================================== */
	.w-table-body {
		height: 100%;
		overflow: auto;
		.w-table-tbody {
			overflow: hidden;
			.w-table-cell {
				border-bottom: 1px solid ${BorderColor};
				padding: ${ThTdPadding}px;
				transition: background 0.05s !important;
			}
			.w-table-cell-hover {
				background: #f7f7f7;
			}
			.w-table-cell-ellipsis {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
`;
